<template>
  <div class="md-contain">
    <el-backtop></el-backtop>
    <span v-if="error">{{error}}</span>
    <el-button id="downloadBtn"
               :class="'margin-top-' + scrollMode"
               @click="download"
               circle
               icon="el-icon-download"
    ></el-button>
    <div class="md-body">
      <MarkdownPreview
          theme="dark"
          :initial-value="md"
      ></MarkdownPreview>
    </div>
  </div>
</template>

<script>
import MarkdownPreview from '@/components/markdown/preview';
import openFile from "@/views/preview/js/openFile";
export default {
name: "Markdown",
  components: {
    MarkdownPreview
  },
  data() {
    return {
      md: undefined,
      error: undefined,
      file: {
        id: undefined,
        name: undefined
      },
      oldScrollTop: 0, //记录上一次滚动结束后的滚动距离
      scrollTop: 0, // 记录当前的滚动距离
      scrollMode: 0, //滚动模式 0：没有滚动 1：向上滚动 2：向下滚动
    }
  },
  methods: {
    download() {
      const link = document.createElement('a')
      const blob = new Blob([this.md], { type: 'application/octet-stream' })
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)
      link.setAttribute('download', this.file.filename + '.md')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link);
    },
    async load() {
      let query = this.$route.query;
      let id = query.id;
      let filename = query.filename;
      if (!id) {
        this.error = '文件不存在'
        return;
      }
      this.file.id = id;
      this.file.filename = filename;
      let response = await openFile(id, filename + ".md");
      try {
        this.md = response;
      } catch (e) {
        this.error = response.message;
      }
      window.document.title = filename + ".md";
    },
    handleScroll() {
      window.addEventListener('scroll', () => {
        this.scrollTop = window.scrollY;
      })
    }
  },
  watch: {
    scrollTop(newValue, oldValue) {
      setTimeout(() => {
        if(newValue === window.scrollY) { //延时执行后当newValue等于window.scrollY，代表滚动结束
          this.oldScrollTop = newValue; //每次滚动结束后都要给oldScrollTop赋值
          this.scrollMode = 0;
        }
      }, 20); //必须使用延时器，否则每次newValue和window.scrollY都相等，无法判断，20ms刚好大于watch的侦听周期，故延时20ms
      if(this.oldScrollTop === oldValue) { //每次滚动开始时oldScrollTop与oldValue相等
        console.log(newValue + "-----" + oldValue);
        if (newValue >= oldValue) {
          this.scrollMode = 2;
        } else {
          this.scrollMode = 1;
        }
      }
    }
  },
  mounted() {
    this.load();
    this.handleScroll();
  },
  beforeDestroy() {
    //移除滚动监听
    window.removeEventListener('scroll', () => {});
  }
}
</script>

<style scoped lang="less">

.md-contain {

  .md-body {
    position: absolute;
    left: 50% ;
    transform: translateX(-50%);
    width: 80%;
  }

  #downloadBtn {
    position: fixed;
    right: 5px;
    transition: margin-top 0.5s;
    box-shadow: 1px 1px 3px #888888;
  }

  //不滚动
  .margin-top-0 {
    margin-top: 8px;
  }

  //向上滚动
  .margin-top-1 {
    margin-top: 13px;
  }

  //向下滚动
  .margin-top-2 {
    margin-top: 3px;
  }
}

</style>